<template>
    <article>
        <header>日期选择框</header>
        <section>
            <header>颜色</header>
            <div>
                <cv-datepicker v-model="value" c="datepicker default medium distant"></cv-datepicker>
                <cv-datepicker v-model="value" c="datepicker primary medium distant"></cv-datepicker>
                <cv-datepicker v-model="value" c="datepicker success medium distant"></cv-datepicker>
                <cv-datepicker v-model="value" c="datepicker warn medium distant"></cv-datepicker>
                <cv-datepicker v-model="value" c="datepicker error medium distant"></cv-datepicker>
            </div>
        </section>
        <section>
            <header>大小</header>
            <div>
                <cv-datepicker v-model="value" c="datepicker primary large distant"></cv-datepicker>
                <cv-datepicker v-model="value" c="datepicker primary medium distant"></cv-datepicker>
                <cv-datepicker v-model="value" c="datepicker primary small distant"></cv-datepicker>
                <cv-datepicker v-model="value" c="datepicker primary mini distant"></cv-datepicker>
            </div>
        </section>
        <section>
            <header>样式</header>
            <div>
                <cv-datepicker v-model="value" lunar c="datepicker primary medium distant"></cv-datepicker>
            </div>
        </section>
    </article>
</template>

<script>
    export default {
        name: "ExampleDatepicker",
        data() {
            return {
                value: new Date(2021, 0, 30)
            };
        }
    }
</script>

<style scoped>
</style>
